<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper class="swiper" interval="3000">
      <swiper-item v-for="(item, index) in carouselImages" :key="index">
        <image :src="item" class="swiper-image"/>
      </swiper-item>
    </swiper>
    <!-- 当前用车或申请用车按钮 -->
    <view class="current-car">
      <view v-if="currentCar">
        <uni-group mode="card" :title="currentCar?'当前用车':'申请用车'">
          <view class="CarRequest-card">
            <view>
              <image :src="currentCar.user.avatarUrlWbxqy" class="avatar"/>
            </view>
            <view class="info">
              <text class="username">{{ currentCar.user.usernameWbxqy }}</text>
              <text class="details">{{ currentCar.car?.brandWbxqy }} - {{ currentCar.car?.modelWbxqy }} -
                {{ currentCar.car.licensePlateWbxqy }}
              </text>
              <text class="details">司机: {{ currentCar.driver.usernameWbxqy }}</text>
              <text class="date">申请日期: {{ currentCar.requestDateWbxqy }}</text>
              <text class="date">开始时间: {{ currentCar.startTimeWbxqy }}</text>
              <text class="date">结束时间: {{ currentCar.endTimeWbxqy }}</text>
              <view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px">
                <view>
                  <uni-tag :text="getStatusText(currentCar.statusWbxqy)"/>
                </view>
                <view>
                  <uni-tag text="查看详情" type="primary" :inverted="true"
                           @click="viewCurrentCarDetails"
                  />
                </view>
              </view>
            </view>
          </view>
          <button @click="endCarRequest" class="primary-button">提前结束用车</button>
        </uni-group>
      </view>
      <view v-else>
        <uni-group mode="card" title="用车申请">
          <uni-section :title="'用车时间段'" type="line">
            <uni-datetime-picker
                type="datetimerange"
                return-type="string"
                v-model="dateTimeRange"
                @change="onDateTimeChange"
            ></uni-datetime-picker>
          </uni-section>
          <uni-section title="用车原因" type="line">
            <input v-model="reason" placeholder="请输入用车原因" class="reason-input"/>
          </uni-section>
          <button @click="applyForCar" class="primary-button">申请用车</button>
        </uni-group>
      </view>
    </view>
  </view>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {applyCar, endCar, getCurrentCarRequest} from '../../api/carRequestMG'
// 用车开始时间和结束时间
const dateTimeRange = ref(['', ''])
// 用车原因
const reason = ref('')
// 是否展示添加行程对话框
const showAddTrip = ref(false)

// 轮播图图片列表
const carouselImages = ref([
  'http://localhost:9999/img/8a7342f7-b6a3-4867-a580-b1326050a4ec_宁静的绿色极光风景壁纸.jpg',
  'http://localhost:9999/img/969078d4-f888-44b4-9703-a69dde1bfb2c_高山峡谷唯美意境风景壁纸.jpg',
  'http://localhost:9999/img/6c56f90b-0dd0-40c2-810d-fe05d54acf98_冬季美丽的树林唯美桌面壁纸.jpg'
])

// 当前用车信息
const currentCar = ref(null)

// 获取当前用车信息
const fetchCurrentCarInfo = async () => {
  try {
    // 请替换为实际的获取当前用车信息的接口
    currentCar.value = await getCurrentCarRequest()
    console.log(currentCar.value)
  } catch (error) {
    console.error('当前用车申请加载失败:', error)
  }
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchCurrentCarInfo()
  uni.setTabBarItem({
    index: 0,
    visible: true
  })
  uni.setTabBarItem({
    index: 1,
    visible: true
  })
  uni.setTabBarItem({
    index: 2,
    visible: false
  })
  uni.setTabBarItem({
    index: 3,
    visible: false
  })
  uni.setTabBarItem({
    index: 4,
    visible: true
  })
})

// 查看当前用车详情
const viewCurrentCarDetails = () => {
  uni.navigateTo({
    url: `/pages/user/CarRequestManage/TripList?requestId=${currentCar.value.requestIdWbxqy}&showAdd=${currentCar.value.statusWbxqy==='A'} `
  })
  // 这里可以跳转到当前用车详情页面
}
const onDateTimeChange = () => {

}
// 申请用车
const applyForCar = async () => {
  console.log(dateTimeRange.val)
  await applyCar({
    startTimeWbxqy: dateTimeRange.value[0].replace(" ", "T"),
    endTimeWbxqy: dateTimeRange.value[1].replace(" ", "T"),
    purposeWbxqy: reason.value
  })
  uni.showToast({
    title: "申请成功,等待管理员审批"
  })
  await fetchCurrentCarInfo()
  // 这里可以跳转到申请用车页面
}
// 结束用车申请
const endCarRequest = async () => {
  await endCar()
  uni.showToast({
    title: "用车已经结束"
  })
  await fetchCurrentCarInfo()
  // 这里可以跳转到申请用车页面
}
// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'S':
      return '待审核'
    case 'A':
      return '已批准'
    case 'R':
      return '已拒绝'
    case 'E':
      return '已结束'
    case 'S1_A':
      return '初审-已分配'
    case 'S2_A':
      return '二审-已确认'
    default:
      return '未知状态'
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 20px;
}

.swiper {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}


.CarRequest-card {
  display: flex;
  justify-content: space-between;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 10px;
}

.primary-button {
  width: 100%;
  margin-top: 40px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  border: none;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  font-size: 16px;
  font-weight: bold;
}

.details {
  font-size: 14px;
  color: #555;
}

.date, .status {
  font-size: 12px;
  color: #999;
}

</style>
